<template>
    <div>
        <el-dialog
                title="加载地图服务"
                style="margin-left: 0%;height: 100%;width:97%"
                :visible.sync="ifShowMapService"
                :before-close="handleClose"
                v-dialogDrag
        >
            <el-form :inline="true" class="demo-form-inline" @submit.native.prevent style="height:50px">
                <el-form-item>
                    <el-tabs v-model="activeName" @tab-click="handleClick" style="width:285px;">
                        <el-tab-pane label="系统服务" name="systemMapService"></el-tab-pane>
                        <el-tab-pane label="个人服务" name="personalMapService"></el-tab-pane>
                        <el-tab-pane label="外部服务" name="externalMapService"></el-tab-pane>
                    </el-tabs>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="inputKeywordSMS" v-if="ifShowSystemInput" style="width:250px"
                              prefix-icon="el-icon-search" placeholder="请输入关键词"
                              @keyup.native.prevent="searchSMS"></el-input>
                    <el-input v-model="inputKeywordPMS" v-if="ifShowPersonalInput" style="width:250px;"
                              prefix-icon="el-icon-search" placeholder="请输入关键词"
                              @keyup.native.prevent="searchPMS"></el-input>
                </el-form-item>
            </el-form>
            <div v-if="ifShowSystemTable">
                <el-table style="max-height:310px; overflow:auto"
                          :show-header="false"
                          :data="systemTableMapService">
                    <el-table-column
                            label="缩略图"
                            width="80">
                        <!--插入图片链接的代码-->
                        <template slot-scope="scope">
                            <img :src="scope.row.imgpath" alt="" style="width: 50px;height: 50px">
                        </template>
                    </el-table-column>
                    <el-table-column label="信息1"
                                     width="180"
                                     white-space="pre-wrap"
                                     :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <div slot="reference" class="name-wrapper">
                                <p style="font-size:14px; line-height:15px"><b>服务名称:</b> {{ scope.row.msname }}</p>
                                <p style="font-size:14px; line-height:15px"><b>服务类型:</b> {{ scope.row.mstype }}</p>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="信息2"
                                     width="270"
                                     white-space="pre-wrap"
                                     :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <div slot="reference" class="name-wrapper">
                                <p style="font-size:14px; line-height:15px"><b>关键词:</b> {{ scope.row.mskeyword }}</p>
                                <p style="font-size:14px; line-height:15px"><b>发布时间:</b> {{ scope.row.mspublictime }}
                                </p>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column>
                        <template slot-scope="scope">
                            <i class="el-icon-circle-plus" scope="scope" size="tiny"
                               @click="systemHandleEdit(scope.$index, scope.row)"></i>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination layout="prev, pager, next"
                               style="right:16px"
                               :page-size="4"
                               :total="systemTotalCount"
                               :current-page="systemCurrentPage"
                               @current-change="systemPageChange">
                </el-pagination>
                <el-row type="flex" class="row-bg" justify="center">
                    <el-col :span="6">
                        <div class="grid-content bg-purple"></div>
                    </el-col>
                </el-row>
            </div>
            <div v-if="ifShowPersonalTable">
                <el-table :show-header="false" style="max-height:310px; overflow:auto"
                          :data="personalTableMapService">
                    <el-table-column
                            label="缩略图"
                            width="80">
                        <!--插入图片链接的代码-->
                        <template slot-scope="scope">
                            <img :src="scope.row.imgpath" alt="" style="width: 50px;height: 50px">
                        </template>
                    </el-table-column>
                    <el-table-column label="信息1"
                                     width="200"
                                     white-space="pre-wrap"
                                     :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <div slot="reference" class="name-wrapper">
                                <p style="font-size:14px; line-height:15px"><b>服务名称:</b> {{ scope.row.msname }}</p>
                                <p style="font-size:14px; line-height:15px"><b>服务类型:</b> {{ scope.row.mstype }}</p>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="信息2"
                                     width="280"
                                     white-space="pre-wrap"
                                     :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <div slot="reference" class="name-wrapper">
                                <p style="font-size:14px; line-height:15px"><b>关键词:</b> {{ scope.row.mskeyword }}</p>
                                <p style="font-size:14px; line-height:15px"><b>发布时间:</b> {{ scope.row.mspublictime }}
                                </p>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column>
                        <template slot-scope="scope">
                            <i class="el-icon-circle-plus" slot-scope="scope" size="tiny"
                               @click="personalHandleEdit(scope.$index, scope.row)"></i>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination layout="prev, pager, next"
                               :page-size="4"
                               :total="personalTotalCount"
                               :current-page="personalCurrentPage"
                               @current-change="personalPageChange">
                </el-pagination>
            </div>
            <div v-if="ifShowExternal" style="position:relative; top:20px">
                <el-form>
                    <el-form-item style="position: relative; left: 76px">
                        <el-label>服务名称：</el-label>
                        <el-input v-model="externalServiceName" style="width:210px"></el-input>
                    </el-form-item>
                </el-form>
                <el-form>
                    <el-form-item style="position: relative; left: 76px">
                        <el-label>服务类型：</el-label>
                        <el-input v-model="externalServiceType" style="width:210px"></el-input>
                    </el-form-item>
                </el-form>
                <el-form>
                    <el-form-item style="position:relative; left:40px">
                        <el-label>服务地址(URL)：</el-label>
                        <el-input v-model="externalServiceURL" style="width:430px"></el-input>
                    </el-form-item>
                </el-form>
                <el-form>
                    <el-form-item style="position:relative; left:250px">
                        <el-button style="background-color:#50bfff; color:white; border-color: #50bfff;"
                                   @click="addExternalService">加载
                        </el-button>
                        <el-button @click="ifShowMapService = false">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import {requestSearch} from '../../api/mapservice';

    export default {
        props: {},
        data() {
            return {
                userid: "",
                ifShowMapService: false,
                ifShowSystemTable: true,
                ifShowPersonalTable: false,
                ifShowExternal: false,
                ifShowSystemInput: true,
                ifShowPersonalInput: false,
                inputKeywordSMS: "",
                inputKeywordPMS: "",
                activeName: "systemMapService",
                pageSize: 5,

                systemTableMapService: [],
                systembody: [],
                systemTotalCount: 1,
                systemCurrentPage: 1,

                personalTableMapService: [],
                personalbody: [],
                personalTotalCount: 1,
                personalCurrentPage: 1,

                externalServiceName: "",
                externalServiceType: "",
                externalServiceURL: "",

                adminRole: "admin"
            }
        },
        mounted() {
            let user = JSON.parse(sessionStorage.getItem('user'));
            //这个莫名报错
            // this.userid = user.id;
            this.requestData(0, "", this.adminRole, 1, this.pageSize);
            this.requestData(0, "", this.userid, 1, this.pageSize);
        },
        methods: {
            requestData(ifInitial, inputKeyword, userInfo, pageNo, pageSize) {
                let searchParams;
                if (userInfo == this.adminRole) {
                    searchParams = {
                        keyword: inputKeyword,
                        publisherRole: userInfo,
                        pageNo: pageNo,
                        pageSize: pageSize
                    };
                } else {
                    searchParams = {
                        keyword: inputKeyword,
                        publisherID: userInfo,
                        pageNo: pageNo,
                        pageSize: pageSize
                    };
                }
                requestSearch(searchParams).then(res => {
                    let {message, code, body} = res.data;
                    if (code !== 200) {
                        this.$message({
                            message: message,
                            type: 'error'
                        });
                    } else {
                        let table = [];
                        if (body.totalCount > 0) {
                            body.result.forEach((item, index) => {
                                item = {
                                    imgpath: body.result[index].thumbnail,
                                    msname: body.result[index].name,
                                    mskeyword: body.result[index].keyword,
                                    mstype: body.result[index].type,
                                    mspublictime: body.result[index].publicTime
                                };
                                table.push(item);
                            });
                        }
                        else if(ifInitial==1) {
                            this.$message({
                                message: '警告:查询结果为空！'
                            });
                        }
                        if (userInfo == this.adminRole) {
                            this.systemTableMapService = table;
                            this.systembody = body.result;
                            this.systemCurrentPage = pageNo;
                            this.systemTotalCount = body.totalCount;
                        } else {
                            this.personalTableMapService = table;
                            this.personalbody = body.result;
                            this.personalCurrentPage = pageNo;
                            this.personalTotalCount = body.totalCount;
                        }
                    }
                });
            },
            handleClick(tab, event) {
                console.log(tab, event);
                if (tab.label == "外部服务") {
                    this.activeName = "externalMapService";
                    this.ifShowSystemInput = false;
                    this.ifShowPersonalInput = false;
                    this.ifShowExternal = true;
                    this.ifShowSystemTable = false;
                    this.ifShowPersonalTable = false;
                } else if (tab.label == "系统服务") {
                    this.activeName = "systemMapService";
                    this.ifShowSystemInput = true;
                    this.ifShowPersonalInput = false;
                    this.ifShowExternal = false;
                    this.ifShowSystemTable = true;
                    this.ifShowPersonalTable = false;
                } else if (tab.label == "个人服务") {
                    this.activeName = "personalMapService";
                    this.ifShowSystemInput = false;
                    this.ifShowPersonalInput = true;
                    this.ifShowExternal = false;
                    this.ifShowSystemTable = false;
                    this.ifShowPersonalTable = true;
                }
            },
            searchSMS(event) {
                if (event.code == "Enter") {
                    this.systemCurrentPage = 1;
                    this.requestData(1,this.inputKeywordSMS.trim(), this.adminRole, this.systemCurrentPage, this.pageSize);

                }
            },
            searchPMS(event) {
                if (event.code == "Enter") {
                    this.personalCurrentPage = 1;
                    this.requestData(1,this.inputKeywordPMS.trim(), this.userid, this.personalCurrentPage, this.pageSize)

                }
            },
            systemPageChange(currentPage) {
                if (currentPage != this.systemCurrentPage) {
                    this.systemCurrentPage = currentPage;
                    this.requestData(1,this.inputKeywordSMS, this.adminRole, this.systemCurrentPage, this.pageSize);
                }
            },
            personalPageChange(currentPage) {
                if (currentPage != this.personalCurrentPage) {
                    this.personalCurrentPage = currentPage;
                    this.requestData(1,this.inputKeywordPMS, this.userid, this.personalCurrentPage, this.pageSize);
                }
            },
            addExternalService() {
                //加载外部服务
                //判断参数是否为空，不为空传出去
                if (this.externalServiceName == "") {
                    this.$message({
                        message: '警告:请填写服务名称！',
                        type: "warning"
                    });
                } else if (this.externalServiceURL == "") {
                    this.$message({
                        message: '警告:请填写服务URL！',
                        type: "warning"
                    });
                } else if (this.externalServiceType == "") {
                    this.$message({
                        message: '警告:请填写服务类型！',
                        type: "warning"
                    });
                } else {
                    let serviceInfo = {
                        name: this.externalServiceName,
                        url: this.externalServiceURL,
                        type: this.externalServiceType
                    };
                    this.$Bus.$emit("serviceAdding", serviceInfo);
                    this.ifShowMapService = false;
                }
            },
            systemHandleEdit(index, row) {
                let serviceInfo = this.systembody[index];
                this.$Bus.$emit("serviceAdding", serviceInfo);
                this.ifShowMapService = false;
            },
            personalHandleEdit(index, row) {
                let serviceInfo = this.personalbody[index];
                this.$Bus.$emit("serviceAdding", serviceInfo);
                this.ifShowMapService = false;
            },
            handleClose(done) {
                // 关闭弹窗
                done();
            }
        },
        created() {
            let that = this;
            that.$Bus.$on("mapServiceVisible", res => {
                if (res !== undefined) {
                    that.ifShowMapService = res.visible;
                }
            });
        }
    }
</script>

<style>
    .el-input__inner {
        height: 30px;
    }
</style>